<template>
  <div class="echarts-main">
    <div class="f-between">
      <div
        class="back-btn"
        v-if="mapname !== 'nanjing'"
        @click="handleRefreshMap('nanjing')"
      >
        <span>返回市地图</span>
      </div>
      <p v-else></p>
      
      <div class="check-btn">
        <slot></slot>
      </div>
    </div>
    <div class="echarts_map" ref="chartsEl"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import mapJson from "@/components/AplidCharts/data/config";
import img from "./JSONsource/back.json";
const pageReload: any = inject("reload");

const router = useRouter();
const route = useRoute();
const chartsEl = ref(null);
let myChart = null;
const mapname = ref(route.query.name || "nanjing");
const mapSvg = ref("");
// 渲染地图
const renderChart = (mapName) => {
  if (!myChart) return;

  if (mapJson[mapName]) {
    echarts.registerMap(mapName, mapJson[mapName]);
  } else {
    echarts.registerMap("nanjing", mapJson["nanjing"]);
  }
  const mapPatternImg = new Image();
  mapPatternImg.src = img.src;

  const baseConfig = {
    width: "100%",
    aspectScale: 1,
    zoom: 1, // 缩放
    layoutSize: mapName == "nanjing" ? "120%" : "100%",
    roam: false,
  };
  // 地图配置项
  const option = {
    animation: true,
    animationDurationUpdate: 500,
    geo: [
      {
        ...baseConfig,
        show: true,
        map: mapName,
        zlevel: -1,
        label: {
          normal: {
            show: false,
            textStyle: {
              color: "none",
            },
          },
          emphasis: {
            show: false,
            textStyle: {
              color: "none",
            },
          },
        },
        layoutCenter: ["50%", "50%"],
        itemStyle: {
          borderWidth: 1,
          borderColor: "#fff",
          shadowColor: "#fff",
          color: {
            image: mapPatternImg,
            repeat: "repeat",
          },
        },
      },
      // 重影
      {
        ...baseConfig,
        type: "map",
        map: mapName,
        zlevel: -2,
        layoutCenter: ["50%", "51%"],
        silent: true,
        itemStyle: {
          borderWidth: 2,
          borderColor: "#fff",
          shadowColor: "rgba(10, 79, 102, 0.6)",
          shadowOffsetY: 7, //控制产生第二个重影
          shadowBlur: 0,
          areaColor: "rgba(10, 79, 102, 0.2)",
          emphasis: {
            show: false,
          },
        },
        label: {
          emphasis: {
            show: false,
          },
        },
      },
    ],
    series: [
      {
        ...baseConfig,
        type: "map",
        map: mapName, // 自定义扩展图表类型
        zlevel: -1,
        layoutCenter: ["50%", "50%"],
        silent: false,
        label: {
          show: false,
          // color: "rgba(255,255,255,0.6)",
          padding: [14, 12],
          borderRadius: 5,
          lineHeight: 16,
          fontSize: 15,
          color: "#fff",
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: "#fff",
          areaColor: "rgba(206, 213, 217, 0.1)",
          emphasis: {
            color: "#fff",
            borderWidth: 2,
            show: true,
            borderColor: "#fff",
            shadowColor: "#fff",
            shadowOffsetY: 5,
            shadowOffsetx: 5,
            shadowBlur: 10,
            areaColor: "rgba(206, 213, 217, 0.1)",
            label: {
              show: false,
              lineHeight: 16,
              fontSize: 15,
              color: "#fff",
            },
          },
        },
      },
    ],
  };
  // 渲染
  myChart?.setOption(option);
  // 防止多次触发click事件，重要！！！
  myChart.off("click");
  // 下钻
  myChart.on("click", (params) => {
    handleRefreshMap(params.name);
  });
};

const handleRefreshMap = (name) => {
  mapname.value = name;
  
  router.replace({
    path: "/nx/index",
    query: {
      name: name,
    },
  });
  setTimeout(() => {
    pageReload();
    renderChart(name);
  }, 0);
};
const initChart = () => {
  myChart = echarts.init(chartsEl.value);
  renderChart(mapname.value);
};

onMounted(() => {
  initChart();
});
</script>

<style scoped lang="scss">
@import './main.scss';
</style>
